<template>
  <div class="app_container">
    <div class="flex_row m_t_20 bg_white">
      <el-button @click="handleExport">导出</el-button>
    </div>
  </div>
</template>

<script>
import ExcelExport from '@/utils/excel-export'

export default {
  name: "Dashboard",
  data() {
    return {};
  },
  created() {

  },
  methods: {
    handleExport() {
      this.allExportList = [{
        accountId: 5001936,
        compNameCn: '公司名称',
        compNameEn: 'zldipjwp',
        id: 3273,
        nameCn: '',
        nameEn: 'ggkjg',
        segId: 8881
      }]
      // 导出excel
      import('@/utils/excel-export').then((excel) => {
        // 设置第一行表头
        // const multiHeader = [
        //   [
        //     `${this.$t('m.rights_Export_TimeZone')}`,
        //     '',
        //     this.exportTimeZoneInfo,
        //     '',
        //   ],
        // ]
        // 设置第二行表头
        const header = ['序号', '公司名称', '预约时间', '姓名', '桌号']

        // 对应数据的属性名
        const filterVal = ['index', 'compName', 'segId', 'name', 'tableNum']
        // 全量数据列表
        const list = this.allExportList
        // 格式化导出的数据
        const data = this.formatJson(filterVal, list)
        // 需要合并的表格项
        // const merges = ['A1:B1', 'C1:D1']
        // 导出方法
        excel.export_json_to_excel({
          // multiHeader,
          header,
          // merges,
          data,
          filename: `post_${new Date().getTime()}.xlsx` // 导出表格名称
        })
      })
    },
    // 处理导出数据
    formatJson(filterVal, jsonData) {
      let index = 1
      return jsonData.map((v) =>
        filterVal.map((j) => {
          switch (j) {
            case 'segId':
              return v[j]
            case 'status':
              return v[j]
            case 'compName':
              return v['compNameCn']
            case 'name':
              return v['nameCn']
            case 'index':
              return index++
            case 'tableNum':
              return v['tableNum']
            default:
              return v[j]
          }
        })
      )
    },
  }
};
</script>
<style scoped>

.app_container {
  position: relative;
  padding: 20px 30px;
  background-color: #eef1f6;
}

div.w_top .box {
  padding: 30px 20px;
}

div.w_top .box .title > span {
  font-weight: 600;
}

div.w_top .box .content > div > span:first-child {
  color: #a0a0a0;
}

div.w_top .box .content > div > span:last-child {
  font-size: 30px;
  color: #545454;
}

.border_r {
  border-right: 1px solid #dcdcdc;
}

div.w_middle .box {
  width: 24%;
}

div.w_middle .box > span:nth-child(2) {
  color: #a0a0a0;
}

div.w_middle .box > span:last-child {
  font-size: 30px;
  color: #545454;
}

div.w_bottom .box {
  height: 150px;
}
</style>
